<template>
  <div class="pc-zk-file-manage">
    <div class="frame-head">
      <div class="reminder_intor"><i class="el-icon-warning"></i>可将视频拖拽至下方视频区域上传</div>
      <div class="rightinput">
        <div class="upload-demoss">
          <div class="bostudias">
            <a class="bostudias_a1">
              <el-button style='' @click.native="upload" type="danger" icon="search"> 上传</el-button>
              <div class="upload-box" v-if="uploadDialogVisible" ref="uploadbox">
                <div class="tobu_box">
                  <div class="upload_top" @mousedown="drag($event)">
                    <i class="icon iconfont icon-ziyuan iconziyuan"></i>
                    多文件上传
                  </div>
                  <div class="floatright" @click="closeUploadForm">
                    <i class="el-dialog__close el-icon el-icon-close"></i>
                  </div>
                </div>
                <div class="spring-blk">
                  <el-upload :action="$ala.clientUploadApi()+'?fileType=2'" :before-upload="beforeUpload" :data="fileData" :on-success="uploadSuccess" multiple :headers="$ala.header('Api/StorageFile/upload')">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                  <el-upload class="upload-demo" drag :action="$ala.clientUploadApi()+'?fileType=2'" multiple :on-success="uploadSuccess" :headers="$ala.header('Api/StorageFile/upload')">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  </el-upload>
                  <div class="show_uploadimg">
                    <div>
                      <img class="uploadimg_img" :src="$ala.host+imgItem" alt="" v-for="(imgItem,imgIndex) in uploadingImages" :key="imgIndex">
                    </div>
                  </div>
                </div>
              </div>
            </a>
            <a class="bostudias_a2">
              <i class="icon iconfont icon-shixiangxiajiantou- icon3"></i>
            </a>
          </div>
        </div>
        <el-input style='width:222px;' placeholder="搜索" prefix-icon="el-icon-search" v-model="searchModel.keyword" class="right_mar"></el-input>
        <el-button style='' @click.native="search(1)" type="primary" icon="search"> 搜索</el-button>
      </div>
    </div>
    <div class="file_content">
      <el-upload :action="$ala.clientUploadApi()+'?fileType=2'" drag multiple :on-success="uploadSuccess" :show-file-list="false">
        <ul class="file_content_ul" v-if="barTitleSelectIndex ===0" v-loading="loading">
          <li class="file_content_li" v-for="(itemImage,imageIndex) in imageListViewModel" :key="imageIndex" @click.stop="fromUpload(itemImage)" :class="{'textlihover':hoverIndex==imageIndex}">
            <div class="matter_box">
              <div class="text-imgsbox" @click.stop="selectImage(itemImage,imageIndex)">
                <img :src="$ala.urlImage(itemImage.path)" v-lazy />
              </div>
            </div>
            <div class="text-p">{{itemImage.name}}</div>
            <div class="remove_but">
              <div class="but1" @click="copyImageUrl($ala.urlImage(itemImage.path))" style="color:#ffffff">复制</div>
              <div class="but2" @click="deleteImage(itemImage.id)">删除</div>
            </div>
          </li>
        </ul>
      </el-upload>
    </div>
    <div class="manage_pagina">
      <el-pagination background v-if="barTitleSelectIndex===0" :current-page="searchModel.pageIndex" @current-change="search" :page-size="searchModel.pageSize" @size-change="changeSearchSize" :page-sizes="[36, 100, 200, 500]" layout="total,prev, pager, next,sizes, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import service from './service'
  import upload from './upload'
  import ala from 'ala'
  export default {
    props: ['type', 'isTenant'],
    data () {
      return {
        uploadType: false,
        loading: false,
        barTitles: [], // 标题栏
        hoverIndex: null,
        barTitleSelectIndex: 0,
        systemBackGroundImageList: [],
        uploadingImages: [], // 正在上传的视频显示
        imageListViewModel: [],
        searchModel: {
          keyword: '',
          pageIndex: 1,
          pageSize: 36
        },
        totalCount: 0,
        uploadDialogVisible: false, // 是否显示视频上传
        imageUrl: '',
        headers: {

        },
        fileData: {
          fileType: 2
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      chooseTitleBar (index) {
        this.barTitleSelectIndex = index
      },
      upload () {
        upload.upload(this)
      },
      fromUpload (val) {
        this.imageUrl = val.path
        this.$emit('saveImage', this.imageUrl)
      },
      async init () {
        this.headers = {
          'zk-tenant': this.$ala.tenant()
        }
        await service.search(this)
      },
      // 限制上传文件
      beforeUpload (file) {
        var isVideo = upload.beforeUpload(file)
        if (isVideo) {
          return true
        } else {
          this.$message.warning('暂时仅支持mp4格式的视频文件上传')
          return false
        }
      },
      async search (pageIndex) {
        this.searchModel.pageIndex = pageIndex
        this.imageListViewModel = []
        await service.search(this)
      },
      async changeSearchSize (pageSize) {
        this.searchModel.pageSize = pageSize
        await this.search(1)
      },
      uploadSuccess (res, file) {
        if (res) {
          this.$message.success('上传成功')
          this.uploadingImages.push(res.path)
          // this.init()
          this.search(1)
        } else {
          this.$message.error('上传失败，请重新上传')
        }
      },
      closeUploadForm () {
        this.uploadDialogVisible = false
      },
      // 选择视频
      selectImage (image, Indeximg) {
        this.hoverIndex = Indeximg
        this.$emit('selectFileChildEvent', image)
      },
      // 拖动文件上传框
      drag (e) {
        upload.drag(this, e)
      },
      async deleteImage (id) {
        service.delete(this, id)
      },
      copyImageUrl (url) {
        service.copyImageUrl(this, url)
      },
      colseFileManger () {
        this.$emit('fileManagerClose', false)
      }
    }
  }
</script>
<style rel="stylesheet/scss"  lang="scss">
  @import "./style.scss";
</style>

